<template>

  <div class="app-container home">

    <div style="text-align:right;padding-right: 20px;margin-top: 50px">
      <el-button type="primary" @click="generateReport" size="mini">生成报告</el-button>
    </div>

    <div style="text-align: center;margin-top: 10px">


      <div
        v-bind:style="{textAlign: 'center',fontSize: +template.fontSizeTitle*2+'px',color: '#'+template.fontTitleColor}">
        {{eventObj.eventTitle}}简报
      </div>

      <div
        v-bind:style="{marginTop: '20px',fontFamily:template.fontFamily,fontSize:template.fontSizeContent*2+'px',textAlign: 'center'}">
        <span>  {{template.publishingDepartment}}</span> <span style="margin-left: 30px;">  {{ parseTime(new Date(), '{y}-{m}-{d}')}} </span>
      </div>


    </div>


    <div v-if="template.elements!=undefined" style="margin: 20px">
      <div v-for="(item,index) in template.elements" style="margin-top: 20px">
        <div style="font-size: 16px;font-weight: bold;margin-bottom: 20px">
          <span v-if="item.showName!=undefined">{{toChinesNum(index+1)}}、{{item.showName}}</span>
          <span v-else>{{toChinesNum(index+1)}}、{{item.name}}</span>
        </div>
        <!--        需要后台统计后生成的文本-->

        <span v-if="item.type==1&&item.name==='本期导读'"> {{briefingGuide != null ? briefingGuide : item.showText}}</span>

        <span v-if="item.type==1&&item.name==='简报概述'"> {{suggestions != null ? suggestions : item.showText}}</span>
        <span
          v-if="item.type==1&&item.name==='监测概述'"> {{monitoringOverview!=null?monitoringOverview:item.showText}}</span>
        <span v-if="item.type==1&&item.name==='处置建议'"> {{suggestions!=null?suggestions:item.showText}}</span>
        <!--        前段输入的文本-->
        <span v-if="item.type==3"> {{item.text}}</span>
        <!--        自定义组件-->
        <opinion-guide v-if="item.name==='舆情导读'" :eventId="eventId" :pageSize="20"></opinion-guide>
        <opinion-main v-if="item.name==='主要舆情'" :eventId="eventId" :pageSize="20"></opinion-main>
        <emotion-trend v-if="item.name==='情感分析'"
                       :eventId="eventId"
                       @getBase64Image="getBase64ImageEmotionTrend"></emotion-trend>
        <WordCloud v-if="item.name==='高频词云'" :hots="hotWords"
                   :height="height"
                   :optionTitleText="optionTitleTextHotWords"></WordCloud>
        <emotion-analysis v-if="item.name==='信息情感分布'"
                          :eventId="eventId"
                          @getBase64Image="getBase64ImageEmotionAnalysis"></emotion-analysis>
        <source-type-analysis v-if="item.name==='来源类型分析'" :eventId="eventId"
                              @getBase64Image="getBase64ImageSourceTypeAnalysis"></source-type-analysis>
        <source-name-analysis v-if="item.name==='媒体来源明细'" :eventId="eventId"
                              @getBase64Image="getBase64ImageSourceNameAnalysis"></source-name-analysis>
        <information-trend v-if="item.name==='信息走势图'" :eventId="eventId"
                           @getBase64Image="getBase64ImageInformationTrend"></information-trend>
        <starting-media v-if="item.name==='首发媒体溯源'" :eventId="eventId"></starting-media>
        <media-name-trend v-if="item.name==='媒体传播分析'" :eventId="eventId"
                          @getBase64Image="getBase64ImageMediaNameTrend"></media-name-trend>
        <venation-of-the-event v-if="item.name==='事件脉络'"></venation-of-the-event>
        <line-chart-demo-media-type v-if="item.name==='信息载体趋势'"></line-chart-demo-media-type>
        <bar-chart-demo-media-type-emotion v-if="item.name==='载体情感分析'"></bar-chart-demo-media-type-emotion>
        <hot-article v-if="item.name==='热门文章'"></hot-article>

      </div>
    </div>

  </div>


</template>

<script>
  import {
    getEvents,
    getKeywordsByEventId
  } from "@/api/system/event";
  import {
    listReport,
    getReport
  } from "@/api/system/template";
  import {
    getBriefingGuide,
    getSuggestions,
    getMonitoringOverview,
    getEventOverview,
    generateReportByManual
  } from "@/api/system/reportGenerate";
  import OpinionGuide from '@/components/Custom/OpinionGuide'
  import OpinionMain from '@/components/Custom/OpinionMain'
  import LineChartDemo from '@/components/Echarts/LineChartDemo'
  import WordCloud from '@/components/Echarts/WordCloud'
  import PieChartDemo from '@/components/Echarts/PieChartDemo'
  import PieChartDemoRose from '@/components/Echarts/PieChartDemoRose'
  import BarChartDemo from '@/components/Echarts/BarChartDemo'
  import LineChartDemoBase from '@/components/Echarts/LineChartDemoBase'
  import LineChartDemoMediaType from '@/components/Echarts/LineChartDemoMediaType'
  import StartingMedia from '@/components/Custom/StartingMedia'
  import BarChartDemoMediaTypeEmotion from '@/components/Echarts/BarChartDemoMediaTypeEmotion'
  import LineChartDemoCustom from '@/components/Echarts/LineChartDemoCustom'
  import VenationOfTheEvent from '@/components/Custom/VenationOfTheEvent'
  import HotArticle from '@/components/Custom/HotArticle'
  import InformationTrend from '@/components/Custom/ReportElement/InformationTrend'
  import SourceTypeAnalysis from '@/components/Custom/ReportElement/SourceTypeAnalysis'
  import SourceNameAnalysis from '@/components/Custom/ReportElement/SourceNameAnalysis'
  import EmotionAnalysis from '@/components/Custom/ReportElement/EmotionAnalysis'
  import EmotionTrend from '@/components/Custom/ReportElement/EmotionTrend'
  import MediaNameTrend from '@/components/Custom/ReportElement/MediaNameTrend'


  export default {
    name: "previewReport",
    components: {
      PieChartDemo,
      OpinionGuide,
      LineChartDemo,
      WordCloud,
      PieChartDemoRose,
      BarChartDemo,
      LineChartDemoBase,
      OpinionMain,
      StartingMedia,
      LineChartDemoCustom,
      VenationOfTheEvent,
      LineChartDemoMediaType,
      BarChartDemoMediaTypeEmotion,
      HotArticle,
      InformationTrend,
      SourceTypeAnalysis,
      SourceNameAnalysis,
      EmotionAnalysis,
      EmotionTrend,
      MediaNameTrend
    },
    data() {
      return {
        height: "400px",
        optionTitleTextHotWords: "",
        hotWords: [{name: "暂无数据", value: 1}],

        eventId: 0,
        eventObj: {},
        templateList: [],
        defaultTemplates: [],
        systemTemplates: [],
        customTemplates: [],
        template: {},
        generateLoading: false,
        briefingGuide: null,
        suggestions: null,
        monitoringOverview: null,
        eventOverview: null,

        base64ImageSourceTypeAnalysis: null,
        base64ImageSourceNameAnalysis: null,
        base64ImageInformationTrend: null,
        base64ImageMediaNameTrend: null,
        base64ImageEmotionTrend: null,
        base64ImageEmotionAnalysis: null,


      }
    },
    created() {
      this.eventId = Number(this.$route.query.eventId)
    },
    mounted() {
      this.getEventDetail()
      this.listReport()
      this.getBriefingGuide()
      this.getSuggestions()
      this.getMonitoringOverview()
      this.getEventOverview()
      this.getKeywordsByEventId()
    },
    methods: {
      getKeywordsByEventId() {
        getKeywordsByEventId({
          eventId: this.eventId,
        }).then(response => {
          if (response.rows != undefined && response.rows.length > 0) {
            this.hotWords = response.rows;
          } else {
            this.hotWords = [{name: "暂无数据", value: 1}];
          }
          console.log(this.hotWords)
        });
      },
      getBase64ImageSourceTypeAnalysis(val) {
        this.base64ImageSourceTypeAnalysis = val
      },
      getBase64ImageSourceNameAnalysis(val) {
        this.base64ImageSourceNameAnalysis = val
      },
      getBase64ImageInformationTrend(val) {
        this.base64ImageInformationTrend = val
      },
      getBase64ImageMediaNameTrend(val) {
        this.base64ImageMediaNameTrend = val
      },
      getBase64ImageEmotionTrend(val) {
        this.base64ImageEmotionTrend = val
      },
      getBase64ImageEmotionAnalysis(val) {
        this.base64ImageEmotionAnalysis = val
      },
      getBriefingGuide() {
        getBriefingGuide(this.eventId).then(response => {
          this.briefingGuide = response.msg
        });
      },
      getSuggestions() {
        getSuggestions(this.eventId).then(response => {
          this.suggestions = response.msg
        });
      },
      getMonitoringOverview() {
        getMonitoringOverview(this.eventId).then(response => {
          this.monitoringOverview = response.msg
        });
      },
      getEventOverview() {
        getEventOverview(this.eventId).then(response => {
          this.eventOverview = response.msg
        });
      },
      generateReport() {

        this.template.elements.forEach(item => {
          if (item.type == 1 && item.name === '本期导读') {
            item.res = this.briefingGuide
          }
          if (item.type == 1 && item.name === '简报概述') {
            item.res = this.eventOverview
          }
          if (item.type == 1 && item.name === '监测概述') {
            item.res = this.monitoringOverview
          }
          if (item.type == 1 && item.name === '处置建议') {
            item.res = this.suggestions
          }
          if (item.name === '情感分析') {
            item.res = this.base64ImageEmotionTrend
          }
          if (item.name === '信息情感分布') {
            item.res = this.base64ImageEmotionAnalysis
          }
          if (item.name === '来源类型分析') {
            item.res = this.base64ImageSourceTypeAnalysis
          }
          if (item.name === '媒体来源明细') {
            item.res = this.base64ImageSourceNameAnalysis
          }
          if (item.name === '信息走势图') {
            item.res = this.base64ImageInformationTrend
          }
          if (item.name === '媒体传播分析') {
            item.res = this.base64ImageMediaNameTrend
          }

        })
        console.log(JSON.stringify(this.template.elements))
        this.generateLoading = true;
        generateReportByManual(this.eventId, this.template.elements).then(response => {
          this.generateLoading = false;
          this.$message.success(response.msg);
        }).catch(() => {
          this.generateLoading = false;
        })
      },
      getEventDetail() {
        getEvents(this.eventId).then(response => {
          this.eventObj = response.data
        });
      },
      getPreview(item) {
        getReport(item.briefReportId).then(response => {
          this.template = response.data
          console.log(JSON.stringify(this.template))
        });
      },
      listReport() {
        listReport(this.queryParams).then(response => {
          this.defaultTemplates = [];
          this.systemTemplates = [];
          this.customTemplates = [];
          this.templateList = response.rows;
          if (this.templateList.length > 0) {
            this.templateList.forEach(item => {
              if (item.isDefault === 1) {
                this.defaultTemplates.push(item)
                this.getPreview(item)
              }
              if (item.isSystem === 1) {
                this.systemTemplates.push(item)
              } else {
                this.customTemplates.push(item)
              }
            })
          }
        });
      }
    }
  }
</script>

<style scoped>
  .home {
    background-color: white;
  }

</style>
